<template>
  <div class="search">
    <div class="search-nav">
      <span class="back" @click="back">返回</span>
      <span class="result">
        <i>'{{ keyword }}'</i>的搜索结果
      </span>
    </div>
    <div class="search-recommend" v-if="searchComicData.length > 0">
      <h3>热门搜索关键字:</h3>
      <div class="hot-keyword">
        <ul>
          <li v-for="(item, index) in hotKeywordData" :key="index" @click="searchComic(item.title)">{{ item.title }}</li>
        </ul>
      </div>
    </div>
    <div class="search-box">
      <div class="search-item" v-for="(item, index) in  searchComicData" :key="index" @click="linkToDetail(item.id)">
        <div class="search-img">
          <img v-lazy="item.vertical_cover" />
          <van-tag mark size="large" color="#ff3f3f">{{ item.is_finish === 1 ? '完结' : '连载中' }}</van-tag>
        </div>
        <div class="search-text">
          <h2 class="title" v-html="`作品:${item.title}`"></h2>
          <div class="search-bt">
            <div class="author-box">
              作者:
              <span class="author" v-for="(a, i) in item.author_name" :key="i" v-html="a"></span>
            </div>
            <span class="types" v-if="item.styles[0]">类型:{{ item.styles[0] }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="noSearch-box" v-if="searchComicData.length === 0">
      <div class="noSerch-img">
        <img src="../assets/noNovel.jpg" alt />
      </div>
      <h3>以下为你推荐</h3>
      <div class="recommend-box">
        <div class="recommend-item" v-for="(item, index) in recommendNovelData" :key="index"
          @click="linkToDetail(item.id)">
          <img :src="item.vertical_cover" alt />
          <span class="title">作品:{{ item.title }}</span>
          <span>作者:{{ item.author_name[0] }}</span>
          <span v-if="item.styles.length !== 0">类型:{{ item.styles[0] }}</span>
          <span>{{ item.total == item.last_short_title ? item.total + '完结' : '更新至' + item.last_short_title + '话' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchComics, getKeyword } from "@/api/api";
export default {
  name: "search",

  data() {
    return {
      keyword: "",
      searchComicData: [],
      recommendNovelData: [],
      hotKeywordData: []
    };
  },
  created() {
    //搜索关键字内容展示该关键字的类型漫画
    this.keyword = this.$route.query.keyword;
    this.getComicKeyword(this.keyword);
    //获取热门搜索关键字
    getKeyword()
      .then(res => {
        this.hotKeywordData = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    back() {
      this.$router.push("/recommend?id=250&activeIndex=0");
    },
    //获取漫画小说的id跳转到详情页
    linkToDetail(id) {
      let path = "/detail";
      this.$router.push({
        path,
        query: { comicId: id, path: "/search?keyword=" + this.keyword }
      });
    },
    //点击热门搜索关键字跳转到搜索漫画页面
    searchComic(keyword) {
      this.keyword = keyword
      this.getComicKeyword(keyword);
    },
    //搜索关键字内容展示该关键字的类型漫画
    getComicKeyword(keyword) {
      searchComics(keyword)
        .then(res => {
          if (res.data.data.list.length == 0) {
            this.recommendNovelData = res.data.data.recommends;
          } else {
            this.searchComicData = res.data.data.list;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  .search-recommend {
    padding: 10px;

    h3 {
      margin: 0;
      font-size: 16px;
      margin-bottom: 10px;
    }

    ul {
      display: flex;
      flex-wrap: wrap;

      li {
        margin-right: 5px;
        font-size: 14px;
        margin-bottom: 5px;
        border: 1px solid #f1f1f1;
        border-radius: 4px;
        padding: 0 5px;

        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }

  .search-nav {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    background: #fff;

    .back {
      font-size: 14px;
      cursor: pointer;
      width: 60px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #ff3f3f;
      color: #fff;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
    }

    .result {
      flex: 1;
      text-align: center;
      font-size: 16px;
      color: #333;

      i {
        color: #ff3f3f;
        margin-right: 5px;
        font-size: 18px;
      }
    }
  }

  .noSearch-box {
    .noSerch-img {
      width: 100%;

      img {
        width: 100%;
      }
    }

    h3 {
      font-size: 18px;
    }

    .recommend-box {
      display: flex;
      flex-wrap: wrap;

      .recommend-item {
        width: 33%;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        padding: 0 5px;
        box-sizing: border-box;

        img {
          width: 100%;
          margin-bottom: 2px;
        }

        .title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .search-box {
    padding: 0 10px;
    margin-top: 20px;

    .search-item {
      display: flex;
      background: #f1f1f1;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 10px;

      .search-img {
        position: relative;
        width: 100px;

        img {
          width: 100px;
          vertical-align: bottom;
        }

        .van-tag {
          position: absolute;
          top: 0;
          right: 0;
        }
      }

      .search-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 10px 10px;

        h2 {
          margin: 0;
          font-size: 18px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          width: 250px;
        }

        .title {
          ::v-deep .keyword {
            color: #ff3f3f;
          }
        }

        .search-bt {
          display: flex;
          flex-direction: column;
          color: #777;
          font-size: 14px;

          .author-box {
            span {
              margin-right: 5px;
              border-right: 1px solid #777;
              padding-right: 5px;

              &:last-child {
                border-right: 0;
                padding-right: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>